.singlePage {
  // margin-bottom: 24px;
  .singleMain {
    display: flex;
    justify-content: flex-start;
    .leftSingle {
      padding: 20px;
      background-color: #fff;
      height: calc(100vh - 173px);
      overflow: scroll;
      width: 83%;
    }
    .rightSingle {
      width: 300px;
      margin-left: 20px;
      height: calc(100vh - 173px);
      // background-color: #fff;
      .topRightSingle {
        // height: calc(50vh - 93px);
        padding: 20px;
        background-color: #fff;
        .content {
          display: flex;
          justify-content: flex-start;
          .gspTop {
            display: flex;
            justify-content: flex-start;
            .GSPName {
              margin-right: 20px;
              .name {
                padding: 20px 15px;
                // background: #ccc;
                border-radius: 4px;
                color: #386bd7;
                font-size: 16px;
                font-weight: 550;
                background: #f0f7ff;
              }
            }
          }
          .gspBottom {
            margin-top: 40px;
            display: flex;
            justify-content: flex-start;
            .GSPName {
              margin-right: 20px;
              margin-top: -50px;
              .name {
                padding: 20px 8px;
                // background: #ccc;
                border-radius: 4px;
                color: #386bd7;
                font-size: 16px;
                font-weight: 550;
                background: #f0f7ff;
              }
            }
          }
        }
      }
      .bottomRightSingle {
        height: calc(50vh - 65px);
        padding: 20px;
        margin-top: 20px;
        background-color: #fff;
      }
    }
  }
  .title {
    font-size: 18px;
    color: #333;
    line-height: 26px;
    margin-bottom: 10px;
    font-weight: 550;
    .editApply {
      margin-left: 10px;
      display: inline-block;
      font-size: 14px;
      // padding: 0px 10px;
      // color: #666;
      // border: 1px solid #ccc;
      line-height: 20px;
      // border-radius: 4px;
      // 
      font-weight: 400;
      .iconfont {
        font-size: 16px;
        color: #999;
        padding-right: 5px;
        cursor: pointer;
      }
    }
  }
  .detailMes {
    .messageContent {
      margin-bottom: 20px;
      .message {
        display: flex;
        justify-content: flex-start;
        // justify-content: space-around;
        flex-wrap: wrap;
        .messageList {
          min-width: 25%;
          margin: 5px 0;
          font-size: 14px;
          text-align: right;
          display: flex;
          justify-content: flex-start;
          // justify-content: space-around;
        }
      }
    }
  }
  .projectNav {
    .stepProgress {
      padding: 10px 0 20px 0;
      min-height: 96px;
    }
  }
  .relationProduct {
    .container {
      display: flex;
      justify-content: flex-start;
    }
    .product {
      padding: 10px 0 20px 0;
      display: flex;
      justify-content: flex-start;
      .title {
        width: 80px;
        font-size: 14px;
        color: #333;
        font-weight: 400;
      }
      .codeContainer {
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        line-height: 30px;
        min-width: 300px;
        // padding: 5px 0;
        font-size: 14px;
        // border: 1px solid #ccc;
        // margin-left: 10px;
        color: #386df3;
        border-radius: 2px;
        .productName {
          padding: 0 5px;
          border-radius: 2px;
          margin: 5px 10px;
          background: #f3f6fb;
          cursor: pointer;
          .deleteProduct {
            font-size: 14px;
            margin-left: 10px;
            cursor: pointer;
          }
        }
      }
    }
    .addProduct {
      margin-left: 20px;
      display: inline-block;
      width: 70px;
      height: 30px;
      text-align: center;
      line-height: 30px;
      background-color: #386df3;
      color: #fff;
      font-size: 14px;
      cursor: pointer;
    }
    .inputSearch {
      margin-left: 20px;
      display: flex;
      justify-content: flex-start;
      .add {
        display: inline-block;
        height: 32px;
        width: 50px;
        text-align: center;
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
        background: #386df3;
        color: #fff;
        font-size: 14px;
        line-height: 32px;
        cursor: pointer;
      }
      /deep/ .ant-select-selection {
        border-top-right-radius: 0px;
        border-bottom-right-radius: 0px;
      }
    }
  }
  .projectBoard {
    .boardContainer {
      // display: flex;
      // justify-content: space-between;
      .chart {
        // height: 150px;
        // height: calc(22vh - 30px);
        // padding: 0px 70px;
        height: calc(22vh - 30px);
        /* padding: 0px 70px; */
        /* display: flex; */
        /* align-items: center; */
        position: relative;
        text-align: center;
        cursor: pointer;
        .complete {
          // position: absolute;
          // margin-top: -67px;
          // margin-left: 40px;
          position: absolute;
          /* margin-top: -67px; */
          /* margin-left: 40px; */
          /* left: auto; */
          left: 36%;
          bottom: 42%;
        }
        /deep/ .ant-progress {
          display: inline-block;
        }
        /deep/.ant-progress-circle .ant-progress-text {
          font-size: 22px;
          font-weight: 550;
          margin-top: -10px;
        }
      }
      .boardContent{
        display: flex;
        justify-content: space-between;
        // position: absolute; 
        // bottom: 10px;
        margin-top: 1vh;
        .dividerLeft{
          border-left: 2px solid #eee;
          // margin: 30px;
        }
      }
      .divider{
        border-bottom: 1px dashed #ccc;
      }
      .explain {
        background: #386df3;
        cursor: pointer;
        padding: 0 20px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        margin: 50px 20px;
        .readIcon {
          color: #fff;
          font-size: 14px;
        }
        .book {
          display: none;
          padding-left: 5px;
          color: #fff;
          font-size: 14px;
        }
        &:hover {
          .book {
            display: inline-block;
          }
        }
      }
    }
  }
  .nodata {
    padding: 10px 0 20px 0;
  }
  /deep/.ant-carousel .slick-slide {
    text-align: center;
    height: 160px;
    line-height: 160px;
    background: #fff;
    overflow: hidden;
  }
  /deep/.ant-carousel .slick-dots li.slick-active button {
    background: #386bd7 !important;
    width: 5px;
    height: 5px;
    border-radius: 50%;
  }
  /deep/.ant-carousel .slick-list .slick-slide.slick-active {
    height: 280px;
    overflow: scroll;
  }
  /deep/.ant-carousel .slick-dots li button {
    background: #ccc !important;
    width: 5px;
    height: 5px;
    border-radius: 50%;
  }
  /deep/.ant-anchor-link {
    text-align: left;
  }
  /deep/.ant-anchor-ink::before {
    background: transparent !important;
    border-left: 1px dashed #ccc !important;
  }
  /deep/.ant-anchor-link-active::before {
    border-left: 2px solid #000;
  }
  // /deep/.ant-anchor-link-title{
  //   color: #386bd7;
  // } 
  // /deep/.ant-anchor.fixed .ant-anchor-ink .ant-anchor-ink-ball {
  //   display: block;
  // }
}